/**
 * 添加 户外屏幕
 * @author xiaoxujs
 */

import { Form, Input, InputNumber, message, Modal, Select } from "antd";
import { FC, useEffect } from "react";
import { IBaseLaneList, IBaseScreenAddForm, IBaseScreenList } from "../../../../type/chedaoweihu";
import { postBaseScreenAdd, postBaseScreenEdit } from "../../api";

const PingmuAddChangeModule: FC<{
  open: boolean;
  clickData?: IBaseScreenList;
  handleCallback: () => void;
  selectList: IBaseLaneList[]
}> = ({
  open,
  clickData,
  handleCallback,
  selectList,
}) => {
    const [form] = Form.useForm<IBaseScreenAddForm>();
    const { validateFields, resetFields , setFieldsValue} = form;
    useEffect(() => {
      if(clickData) {
        setFieldsValue(clickData)
      }
    }, [clickData, setFieldsValue])
    
    const handleOk = async () => {
      const values = await validateFields();
      console.log(values)
      if (clickData) {
        const params  = {
          ...values,
          id: clickData.id
        }
        const { code, msg } = await postBaseScreenEdit(params) as { code: number, msg: string };
        if (code === 20000) {
          resetFields()
          handleCallback();
        } else {
          message.error(msg)
        }
      } else {
        const { code, msg } = await postBaseScreenAdd(values) as { code: number, msg: string };
        if (code === 20000) {
          resetFields()
          handleCallback();
        } else {
          message.error(msg)
        }
      }
      // setIsModalOpen(false);
    };

    const handleCancel = () => {
      resetFields()
      handleCallback()
      // setIsModalOpen(false);
    };
    return <Modal title={clickData ? '修改户外屏' : '添加户外屏'} open={open} onOk={handleOk} onCancel={handleCancel}>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        form={form}
      >
        <Form.Item<IBaseScreenAddForm>
          label="IP地址"
          name="ipAddress"
          rules={[{ required: true, message: '请输入IP地址!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<IBaseScreenAddForm>
          label="端口号"
          name="portNumber"
          rules={[{ required: true, message: '请输入端口号!' }]}
        >
          <InputNumber style={{width: '100%'}} />
        </Form.Item>
        <Form.Item<IBaseScreenAddForm>
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<IBaseScreenAddForm>
          label="密码"
          name="pwd"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<IBaseScreenAddForm>
          label="安装位置"
          name="laneId"
          rules={[{ required: true, message: '请选择安装位置!' }]}
        >
          <Select  options={selectList} fieldNames={{
            label: 'laneName',
            value: 'id'
          }} />
        </Form.Item>
        <Form.Item<IBaseScreenAddForm>
          label="备注"
          name="notes"
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  }

export default PingmuAddChangeModule;